<template>
  <div class="hmcx">
    <Card title="业务查询">
      <div slot="cRight" class="cRight">
        <el-form inline size="small">
          <el-form-item label="400号码">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="归属人（单位）">
            <el-input></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <Card title="400号码订单查询">
        <section>
          <Table
            :tableData="tableData"
            selection
            @btnClick="handleClick"
          ></Table>
          <Pagination :total="tableData.row.length"></Pagination>
        </section>
      </Card>
    </Card>

    <el-dialog
      close="dialog"
      title="审批"
      :visible.sync="dialogVisibleE"
      width="60%"
      top="10vh"
    >
      <el-scrollbar>
        <el-input
          type="textarea"
          :autosize="{ minRows: 25 }"
          placeholder="请输入审批内容"
          v-model="textarea"
        />
      </el-scrollbar>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisibleE = false">
          确 定
        </el-button>
      </span>
    </el-dialog>

    <el-dialog
      close="dialog"
      title="查看流程"
      :visible.sync="dialogVisibleA"
      width="60%"
      top="10vh"
    >
      <el-scrollbar>
        <img src="@/assets/lc/hmyz.jpg" alt="" style="width: 100%" />
      </el-scrollbar>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisibleA = false">
          返 回
        </el-button>
      </span>
    </el-dialog>
    <el-dialog
      close="dialog"
      title="审批查看"
      :visible.sync="dialogVisibleB"
      width="60%"
      top="10vh"
    >
      <el-scrollbar>
        <Table :tableData="tableDataA" />
      </el-scrollbar>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisibleB = false">
          返 回
        </el-button>
      </span>
    </el-dialog>
    <el-dialog
      close="dialog"
      title="号码预占"
      :visible.sync="dialogVisibleC"
      width="60%"
      top="10vh"
    >
      <el-scrollbar>
        <el-form label-width="150px" :model="formD" style="width: 50%">
          <el-form-item label="预占企业客户">
            <el-input v-model="formD.valA"></el-input>
          </el-form-item>
          <el-form-item label="企业关键字描述">
            <el-input v-model="formD.valB"></el-input>
          </el-form-item>
          <el-form-item label="预占号码">
            <el-input v-model="formD.valC"></el-input>
          </el-form-item>
          <el-form-item label="预占号码类型">
            <el-input v-model="formD.valD"></el-input>
          </el-form-item>
        </el-form>
      </el-scrollbar>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="
            dialogVisibleC = false
            selectVal.colE = '400平台开通'
            $message({
              message: '号码预占成功',
              type: 'success'
            })
          "
        >
          预 占
        </el-button>
        <el-button @click="dialogVisibleC = false"> 返 回 </el-button>
      </span>
    </el-dialog>
    <el-dialog
      close="dialog"
      title="业务开通"
      :visible.sync="dialogVisibleD"
      width="60%"
      top="10vh"
    >
      <el-scrollbar>
        <Card title="业务介绍">
          <h4>一、400电话介绍</h4>
          <p>
            400电话是主被叫分摊付费业务电话，主叫方支付当地市话费，被叫接听方承担市话或长途费。
          </p>
          <p>
            企业400电话总机是一个中转虚拟号码不需要安装实体电话，只需绑定固话、手机或呼叫中心平台即可使用。
          </p>
          <h4>二、400电话作用</h4>
          <p>
            400电话可以提升企业的形象，增加客户信任，是企业信誉和实力的象征。
          </p>
          <p>
            号码终身不变，没有地域限制，实现企业对外宣传统一性、规范性，不会流失一个客户。平台功能强大，是企业营销必备利器。
          </p>
        </Card>
        <Card title="业务开通">
          <el-form inline size="small" :model="formA">
            <el-form-item label="客户名称">
              <el-input v-model="formA.valA"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button size="mini" type="primary" @click="selectPer = true"
                >选取客户</el-button
              >
            </el-form-item>
            <el-form-item label="客户编码">
              <el-input v-model="formA.valB"></el-input>
            </el-form-item>
            <el-form-item label="客户所在省">
              <el-input v-model="formA.valC"></el-input>
            </el-form-item>
            <el-form-item label="客户所在市">
              <el-input v-model="formA.valD"></el-input>
            </el-form-item>
          </el-form>
        </Card>
        <Card title="产品选择">
          <el-checkbox-group v-model="checkedVal" :max="valGroup.length">
            <el-checkbox v-for="item in valGroup" :label="item" :key="item">
              {{ item }}
            </el-checkbox>
          </el-checkbox-group>
          <el-card
            shadow="never"
            v-if="checkedVal.includes('语音产品')"
            style="margin-top: 20px"
          >
            <div slot="header">
              <span>语音产品</span>
            </div>
            <Card title="产品资费">
              <el-checkbox-group v-model="checkList" max="1">
                <el-checkbox label="400语音免费资费"></el-checkbox>
                <el-checkbox label="100元每月"></el-checkbox>
              </el-checkbox-group>
            </Card>
            <Card title="产品属性">
              <el-form size="small" inline :model="formB">
                <el-form-item label="400号码">
                  <el-input v-model="formB.valA"></el-input>
                </el-form-item>
                <el-form-item label="管理员邮箱">
                  <el-input v-model="formB.valB"></el-input>
                </el-form-item>
                <el-form-item label="预占单流水号">
                  <el-input v-model="formB.valC"></el-input>
                </el-form-item>
                <el-form-item label="主叫号码判别规则">
                  <el-input v-model="formB.valD"></el-input>
                </el-form-item>
                <el-form-item label="被阻号码">
                  <el-input v-model="formB.valE"></el-input>
                </el-form-item>
              </el-form>
            </Card>
          </el-card>
          <el-card
            shadow="never"
            v-if="checkedVal.includes('呼叫阻截')"
            style="margin-top: 20px"
          >
            <div slot="header">
              <span>呼叫阻截</span>
            </div>
            <Card title="产品资费">
              <el-checkbox-group v-model="checkListA" max="1">
                <el-checkbox label="功能费标准每项100元"></el-checkbox>
                <el-checkbox label="免费套餐"></el-checkbox>
              </el-checkbox-group>
            </Card>
            <Card title="产品属性">
              <el-form size="small" inline :model="formB">
                <el-form-item label="400号码">
                  <el-input v-model="formB.valA" disabled></el-input>
                </el-form-item>
                <el-form-item label="呼叫阻截省">
                  <el-input v-model="formBB.valA"></el-input>
                </el-form-item>
                <el-form-item label="呼叫阻截地市">
                  <el-input v-model="formBB.valB"></el-input>
                </el-form-item>
              </el-form>
            </Card>
          </el-card>
        </Card>
        <Card title="开通设置">
          <el-form size="small" inline :model="formC">
            <el-form-item label="生效日期">
              <el-select :value="1" size="small" v-model="formC.valA">
                <el-option label="当日生效" :value="1"> </el-option>
                <el-option label="下月生效" :value="2"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="账单生效时间">
              <el-select :value="1" size="small" v-model="formC.valB">
                <el-option label="当日生效" :value="1"> </el-option>
                <el-option label="下月生效" :value="2"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="支付模式">
              <el-select :value="1" size="small" v-model="formC.valC">
                <el-option label="有限公司一点受理，一点支付" :value="1">
                </el-option>
                <el-option label="有限公司一点受理，分省支付" :value="2">
                </el-option>
                <el-option label="主办省一点受理，一点支付" :value="3">
                </el-option>
                <el-option label="主办省一点受理，分省支付" :value="4">
                </el-option>
                <el-option label="本省受理，本省支付" :value="5"> </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </Card>
      </el-scrollbar>
      <el-dialog
        close="dialog"
        title="选取客户"
        :visible.sync="selectPer"
        width="60%"
        top="10vh"
        append-to-body
      >
        <el-scrollbar>
          <Person />
        </el-scrollbar>
      </el-dialog>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="
            dialogVisibleD = false
            $message({
              message: '受理成功，订单号为6883',
              type: 'success'
            })
          "
        >
          开 通
        </el-button>
        <el-button @click="dialogVisibleD = false"> 返 回 </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Card from '@/components/Card'
import Table from '@/components/Table'
import Pagination from '@/components/Pagination'
import Person from './components/Person'
export default {
  components: {
    Card,
    Table,
    Pagination,
    Person
  },

  data() {
    return {
      selectVal: '',
      textarea: '',
      checkList: [],
      checkListA: [],
      dialogVisibleA: false,
      dialogVisibleB: false,
      dialogVisibleC: false,
      dialogVisibleD: false,
      dialogVisibleE: false,
      checkedVal: [],
      selectPer: false,
      valGroup: [
        '语音产品',
        '呼叫阻截',
        '密码接入',
        '语音次数限制',
        '挂机短信',
        '外呼',
        '云客服'
      ],
      formA: {
        valA: '',
        valB: '',
        valC: '',
        valD: ''
      },
      formB: {
        valA: '',
        valB: '',
        valC: '',
        valD: '',
        valE: ''
      },
      formBB: {
        valA: '',
        valB: ''
      },
      formC: {
        valA: 1,
        valB: 1,
        valC: 1
      },
      formD: {
        valA: '',
        valB: '',
        valC: '',
        valD: ''
      },
      tableDataRoleA: {
        col: [
          {
            prop: 'colA',
            label: '订单号'
          },
          {
            prop: 'colB',
            label: '号码'
          },
          {
            prop: 'colC',
            label: '客户名称'
          },
          {
            prop: 'colE',
            label: '状态'
          },
          {
            prop: 'colG',
            label: '操作',
            type: 'Button',
            width: '500px',
            btnList: [{ label: '查看订单' }, { label: '查看流程' }]
          }
        ],
        row: [
          {
            colA: '5635',
            colB: '400123693',
            colC: '荣光集团',
            colD: '在网年限1年',
            colE: '400平台开通',
            colF: '二类特殊号码'
          },
          {
            colA: '5636',
            colB: '400123596',
            colC: '广大能源',
            colD: '在网年限3年',
            colE: '400平台开通',
            colF: '三类特殊号码'
          },
          {
            colA: '5637',
            colB: '400123589',
            colC: '北汽集团',
            colD: '在网年限2年',
            colE: '400平台开通',
            colF: '一类特殊号码'
          },
          {
            colA: '5638',
            colB: '400123658',
            colC: '李峰集团',
            colD: '在网年限1年',
            colE: '400平台开通',
            colF: '六类特殊号码'
          },
          {
            colA: '5655',
            colB: '400325698',
            colC: '天正集团',
            colD: '在网年限2年',
            colE: '400平台开通',
            colF: '三类特殊号码'
          },
          {
            colA: '5698',
            colB: '400235412',
            colC: '能枫集团',
            colD: '在网年限1年',
            colE: '400平台开通',
            colF: '普通号码'
          }
        ]
      },
      tableDataRoleB: {
        col: [
          {
            prop: 'colA',
            label: '订单号'
          },
          {
            prop: 'colB',
            label: '号码'
          },
          {
            prop: 'colC',
            label: '客户名称'
          },
          {
            prop: 'colE',
            label: '状态'
          },
          {
            prop: 'colG',
            label: '操作',
            type: 'Button',
            width: '500px',
            btnList: [{ label: '查看订单' }, { label: '查看流程' }]
          }
        ],
        row: [
          {
            colA: '5635',
            colB: '400123693',
            colC: '荣光集团',
            colD: '在网年限1年',
            colE: '400平台开通',
            colF: '二类特殊号码'
          },
          {
            colA: '5636',
            colB: '400123596',
            colC: '广大能源',
            colD: '在网年限3年',
            colE: '400平台开通',
            colF: '三类特殊号码'
          },
          {
            colA: '5637',
            colB: '400123589',
            colC: '北汽集团',
            colD: '在网年限2年',
            colE: '400平台开通',
            colF: '一类特殊号码'
          },
          {
            colA: '5638',
            colB: '400123658',
            colC: '李峰集团',
            colD: '在网年限1年',
            colE: '400平台开通',
            colF: '六类特殊号码'
          },
          {
            colA: '5655',
            colB: '400325698',
            colC: '天正集团',
            colD: '在网年限2年',
            colE: '400平台开通',
            colF: '三类特殊号码'
          },
          {
            colA: '5698',
            colB: '400235412',
            colC: '能枫集团',
            colD: '在网年限1年',
            colE: '400平台开通',
            colF: '普通号码'
          }
        ]
      },
      tableDataA: {
        col: [
          {
            prop: 'colA',
            label: '订单号'
          },
          {
            prop: 'colB',
            label: '人员'
          },
          {
            prop: 'colC',
            label: '部门'
          },
          {
            prop: 'colD',
            label: '审批状态'
          },
          {
            prop: 'colE',
            label: '审批意见'
          },
          {
            prop: 'colF',
            label: '时间'
          }
        ],
        row: [
          {
            colA: '1',
            colB: '杨正',
            colC: '业务管理员',
            colD: '通过',
            colE: '通过',
            colF: '2020-01-03'
          },
          {
            colA: '2',
            colB: '李亮',
            colC: '信息化部',
            colD: '通过',
            colE: '通过',
            colF: '2020-01-04'
          },
          {
            colA: '3',
            colB: '孙正',
            colC: '信息化部',
            colD: '通过',
            colE: '通过',
            colF: '2020-01-08'
          }
        ]
      }
    }
  },

  computed: {
    tableData() {
      if (this.$store.getters.userinfo.role === 0) return this.tableDataRoleA
      return this.tableDataRoleB
    }
  },

  methods: {
    handleClick(index, scope) {
      if (index === 1) this.dialogVisibleA = true
      if (index === 2) this.dialogVisibleB = true
      if (index === 3) {
        this.dialogVisibleC = true
        this.selectVal = scope.row
      }
      if (index === 4) this.dialogVisibleD = true
    }
  }
}
</script>

<style lang="scss" scoped>
.cRight {
  .el-form-item {
    margin-bottom: 0 !important;
  }
}
/deep/.el-dialog__body {
  height: 62vh;
}
</style>
